<template>
  <div class="drama-panel-container">
    <div class="panel-header">
      <div class="header-content">
        <span class="header-title">选择影视剧</span>
        <div class="header-right">
          <span v-if="filteredTotal > 0" class="total-count">
            共{{ filteredTotal }}部
          </span>
        </div>
      </div>
    </div>

    <!-- 搜索框和过滤选项 -->
    <div class="drama-search-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索ID、名称..."
        clearable
        :prefix-icon="Search"
        @clear="handleSearchClear"
        size="small"
      />
      
      <!-- 字幕状态过滤选项 -->
      <div class="filter-options">
        <span class="filter-label">字幕状态：</span>
        <el-radio-group v-model="subtitleStatusFilter" size="small">
          <el-radio-button :value="SubtitleStatusFilter.ALL">全部显示</el-radio-button>
          <el-radio-button :value="SubtitleStatusFilter.COMPLETED">只显示已完成</el-radio-button>
          <el-radio-button :value="SubtitleStatusFilter.INCOMPLETE">只显示未完成</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-container">
      <el-empty description="数据加载失败" image-size="80">
        <template #description>
          <span style="color: #ef4444; font-size: 15px; font-weight: 500;">{{ error }}</span>
        </template>
        <el-button @click="refreshData" type="primary" size="default">
          重新加载
        </el-button>
      </el-empty>
    </div>

    <!-- 影视剧表格 -->
    <div class="table-container" v-if="!error">
      <el-table
        :data="displayedDramas"
        highlight-current-row
        @current-change="handleDramaSelection"
        style="width: 100%"
        height="100%"
        v-loading="loading"
        element-loading-text="加载影视剧..."
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        border
      >
        <!-- 字幕完成状态列 - 在ID前面 -->
        <el-table-column label="字幕" width="90" align="center">
          <template #default="{ row }">
            <div class="status-display">
              <el-tag 
                :type="getStatusType(row)"
                size="small"
                effect="light"
                class="status-tag-detailed"
              >
                <el-icon v-if="getStatusType(row) === 'success'" size="12">
                  <Check />
                </el-icon>
                <el-icon v-else size="12">
                  <DocumentCopy />
                </el-icon>
                {{ getStatusText(row) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="名称" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 - 更智能的显示逻辑 -->
    <div class="drama-pagination-container" v-if="!error && shouldShowPagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next"
        :total="filteredTotal"
        @size-change="handlePageChange"
        @current-change="handlePageChange"
        size="small"
        background
      />
    </div>

    <!-- 搜索/数据状态信息 -->
    <div class="status-info">
      <div v-if="isSearchMode" class="search-info">
        <span class="search-text">
          <template v-if="searchLoading">
            <el-icon class="is-loading"><Loading /></el-icon>
            正在搜索"{{ searchQuery }}"...
          </template>
          <template v-else>
            搜索"{{ searchQuery }}"找到 {{ searchTotal }} 条结果
            <span v-if="lastSearchTime > 0" class="search-time">
              ({{ lastSearchTime }}ms)
            </span>
            <el-button 
              link 
              type="primary" 
              size="small" 
              @click="handleSearchClear"
              style="margin-left: 8px;"
            >
              清除搜索
            </el-button>
          </template>
        </span>
      </div>
      <div v-else-if="!loading && filteredTotal > 0" class="data-info">
        <span class="data-text">
          显示第 {{ startIndex + 1 }}-{{ endIndex }} 条，共 {{ filteredTotal }} 条记录
          <template v-if="subtitleStatusFilter !== SubtitleStatusFilter.ALL">
            （已按{{ getFilterLabel() }}筛选）
          </template>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Search, Loading, Check, DocumentCopy } from '@element-plus/icons-vue'
import { useDramaList } from '../../composables/useDramaList'
import type { Drama } from '../../api/drama'

interface Emits {
  (e: 'drama-selected', drama: Drama | null): void
}

const emit = defineEmits<Emits>()

const {
  searchQuery,
  loading,
  pagination,
  displayedDramas,
  handlePageChange,
  isSearchMode,
  searchLoading,
  searchTotal,
  lastSearchTime,
  clearSearch,
  error,
  refreshData,
  subtitleStatusFilter,
  filteredTotal,
  SubtitleStatusFilter
} = useDramaList()

// 计算显示的数据范围
const startIndex = computed(() => {
  return (pagination.currentPage - 1) * pagination.pageSize
})

const endIndex = computed(() => {
  return Math.min(startIndex.value + pagination.pageSize, filteredTotal.value)
})

// 是否显示分页器
const shouldShowPagination = computed(() => {
  return filteredTotal.value > pagination.pageSize
})

const handleDramaSelection = (drama: Drama | null) => {
  emit('drama-selected', drama)
}

// 清空搜索的处理
const handleSearchClear = () => {
  clearSearch()
}

// 获取状态显示相关方法
const getStatusType = (drama: Drama) => {
  // null、undefined 或不等于0的都算未完成，显示为 warning
  return drama.subtitleStatus === 0 ? 'success' : 'warning'
}

const getStatusText = (drama: Drama) => {
  // null、undefined 或不等于0的都显示为"未完成"
  return drama.subtitleStatus === 0 ? '已完成' : '未完成'
}

// 获取过滤器标签
const getFilterLabel = () => {
  switch (subtitleStatusFilter.value) {
    case SubtitleStatusFilter.COMPLETED:
      return '已完成'
    case SubtitleStatusFilter.INCOMPLETE:
      return '未完成'
    default:
      return '全部'
  }
}
</script>

<style scoped>
/* 组件特定样式 */
.drama-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  flex-shrink: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.total-count {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}

.drama-search-container {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafbfc;
  flex-shrink: 0;
}

.drama-search-container .el-input {
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.error-container {
  padding: 16px;
  text-align: center;
  background: white;
}

.drama-pagination-container {
  padding: 12px 16px;
  background: #fafbfc;
  border-top: 1px solid #ebeef5;
  flex-shrink: 0;
}

.status-tag-detailed {
  font-size: 11px;
  padding: 2px 6px;
  height: 20px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 45px;
  justify-content: center;
}

.status-display {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 状态信息样式 */
.status-info {
  min-height: 24px;
  padding: 8px 16px;
  border-top: 1px solid #ebeef5;
  background-color: #fafbfc;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  flex-shrink: 0;
}

.search-info {
  padding: 8px 16px;
  background: #f0f9ff;
  border-top: 1px solid #e0f2fe;
  font-size: 14px;
  color: #0369a1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.data-info {
  padding: 6px 16px;
  background: #fafbfc;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

.search-text, .data-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.search-time {
  color: #64748b;
  font-size: 12px;
}

/* Loading animation for search */
.search-info .is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 表格行悬停效果 */
:deep(.el-table__row) {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f9fafb;
}

:deep(.el-table__row.current-row) {
  background-color: #eff6ff;
}

/* 过滤选项样式 */
.filter-options .el-radio-group {
  flex-wrap: wrap;
}

.filter-options .el-radio-button {
  margin-bottom: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-options {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-label {
    margin-bottom: 4px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>